<!--
  * 办公/公告分类 列表
  * 
  * @Author:    天青飞扬
  * @Wechat:    18576228047
  * @Email:     1787585212@qq.com 
  * @Date:      2024-08-15 20:15:49
-->
<template>
    <a-form class="smart-query-form" v-privilege="'oa:notice:query'">
        <a-row class="smart-query-form-row">
            <a-form-item label="关键字" class="smart-query-form-item">
                <a-input style="width: 300px" v-model:value="queryForm.keywords" placeholder="请输入关键字" />
            </a-form-item>
            <a-form-item class="smart-query-form-item smart-margin-left10">
                <a-button-group>
                    <a-button type="primary" @click="onQuerySubmit">
                        <template #icon>
                            <SearchOutlined />
                        </template>
                        查询
                    </a-button>
                    <a-button @click="onQueryReset">
                        <template #icon>
                            <ReloadOutlined />
                        </template>
                        重置
                    </a-button>
                </a-button-group>
            </a-form-item>
        </a-row>
    </a-form>

    <a-card size="small" :bordered="false">
        <a-row class="smart-table-btn-block">
            <div class="smart-table-operate-block">
                <a-button type="primary" @click="addOrUpdate()" v-privilege="'oa:notice:add'">
                    <template #icon>
                        <PlusOutlined />
                    </template>
                    新建
                </a-button>

                <a-button v-privilege="'system:menu:batchDelete'" type="primary" danger @click="batchDelete" :disabled="!hasSelected">
                    <template #icon>
                        <DeleteOutlined />
                    </template>
                    批量删除
                </a-button>
            </div>
            <div class="smart-table-setting-block">
                <TableOperator v-model="tableColumns" :refresh="getNoticeCategoryPage" />
            </div>
        </a-row>

        <a-table
            rowKey="categoryId"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="tableColumns"
            :data-source="tableData"
            :pagination="true"
            :loading="tableLoading"
            @change="onTableChange"
            size="small"
            bordered
        >
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                    <div class="smart-table-operate">
                        <a-button type="link" @click="addOrUpdate(record.categoryId)" v-privilege="'oa:notice:update'">编辑</a-button>
                        <a-button type="link" @click="singleDelete(record)" v-privilege="'oa:notice:delete'" danger>删除</a-button>
                    </div>
                </template>
            </template>
        </a-table>
    </a-card>

    <NoticeCategoryFormDrawer ref="noticeCategoryFormDrawer" @reloadList="getNoticeCategoryPage" />
</template>

<script setup>
import { reactive, ref, computed, onMounted, createVNode } from 'vue';
import { message, Modal } from 'ant-design-vue';
import _ from 'lodash';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { noticeCategoryApi } from '/@/api/business/office/notice-category-api';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
import NoticeCategoryFormDrawer from './components/notice-category-form-drawer.vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

// ------------------------------------------------------------

const tableData = ref([]);
const tableTotal = ref(0);
const tableLoading = ref(false);

const tableColumns = ref([
    {
        title: '分类',
        dataIndex: 'name',
        width: 300,
        ellipsis: true,
        sorter: (a, b) => {},
        sortDirections: ['descend', 'ascend'],
    },
    {
        title: '排序',
        dataIndex: 'sort',
        width: 300,
        ellipsis: true,
        sorter: (a, b) => {},
        sortDirections: ['descend', 'ascend'],
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 150,
        sorter: (a, b) => {},
        sortDirections: ['descend', 'ascend'],
    },
    {
        title: '修改时间',
        dataIndex: 'updateTime',
        width: 150,
        sorter: (a, b) => {},
        sortDirections: ['descend', 'ascend'],
    },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 120,
    },
]);

const queryFormState = {
    pageNum: 1,
    pageSize: PAGE_SIZE,
    orderBy: null,
    direction: null,
    keywords: undefined, //关键字
};

const queryForm = reactive({ ...queryFormState });

onMounted(() => {
    getNoticeCategoryPage();
});

function onQuerySubmit() {
    queryForm.pageNum = 1;
    getNoticeCategoryPage();
}

function onQueryReset() {
    Object.assign(queryForm, queryFormState);
    getNoticeCategoryPage();
}

function onTableChange(pagination, filters, sorter) {
    queryForm.orderBy = sorter.field;
    queryForm.direction = sorter.order;
    getNoticeCategoryPage();
}

async function getNoticeCategoryPage() {
    try {
        tableLoading.value = true;
        const result = await noticeCategoryApi.getNoticeCategoryPage(queryForm)
        tableData.value = result.data.list;
        tableTotal.value = result.data.total;
    } catch (err) {
        smartSentry.captureError(err);
    } finally {
        tableLoading.value = false;
    }
}

// -------------------- 多选 --------------------

const selectedRowKeys = ref([]);
const hasSelected = computed(() => selectedRowKeys.value.length > 0);

let selectedRows = [];

function onSelectChange(keyArray, selectRows) {
    selectedRowKeys.value = keyArray;
    selectedRows = selectRows;
}

// ----------------- 新建/编辑 ------------------

const noticeCategoryFormDrawer = ref();

function addOrUpdate(categoryId) {
    noticeCategoryFormDrawer.value.showModal(categoryId);
}

// -------------------- 删除 --------------------

function singleDelete(record) {
    confirmDelete([record]);
}

function batchDelete() {
    confirmDelete(selectedRows);
}

function confirmDelete(rows) {
    const categoryNames = rows.map((e) => e.name);
    Modal.confirm({
        title: '确定要删除如下数据吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: _.join(categoryNames, '、'),
        okText: '删除',
        okType: 'danger',
        onOk() {
            const categoryIds = rows.map((e) => e.categoryId);
            batchDeleteNoticeCategories(categoryIds);
            selectedRows = [];
            selectedRowKeys.value = [];
        },
        cancelText: '取消',
        onCancel() {},
    });
}

async function batchDeleteNoticeCategories(categoryIds) {
    try {
        SmartLoading.show();
        await noticeCategoryApi.batchDeleteNoticeCategories(categoryIds);
        message.success('删除成功!');
        getNoticeCategoryPage();
    } catch (e) {
        smartSentry.captureError(e);
    } finally {
        SmartLoading.hide();
    }
}

</script>